<template>
  <div class="business-user">
    <!-- left -->
    <div class="fl">
      <ShopListMenu
        :has-select-all-button="true"
        :has-headquarters="true"
        title="组织架构"
        @emitShopId="emitShopId"
      />
    </div>

    <!-- right -->
    <div class="right app-main-content-box">
      <transition name="el-fade-in-linear">
        <user-list
          v-if="tabName==='user'&&moduleType==='list'"
          ref="userList"
          :shop-id="shopId"
          :shop-name="shopName"
          :cur-select-label="curSelectLabel"
          @changeShowType="changeShowType"
        />
      </transition>
      <transition name="el-fade-in">
        <user-approve
          v-if="moduleType==='approve'"
          ref="userApprove"
          :shop-id="shopId"
          :shop-name="shopName"
          :cur-select-label="curSelectLabel"
          @changeShowType="changeShowType"
        />
      </transition>
    </div>
  </div>
</template>

<script>
import UserList from './components/UserList'
import UserApprove from './components/UserApprove'
import { mapActions } from 'vuex'
export default {
  components: {
    UserList,
    UserApprove
  },
  props: {
    business: {},
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      // 配置
      moduleType: 'list', // 当前显示默认list  approve
      // 数据
      shopId: null,
      shopName: '',
      curSelectLabel: ''
    }
  },
  watch: {
    tabName(val) {
      if (val === 'user') {
        this.moduleType = 'list'
      }
    }
  },
  mounted() {
    this.getActiveMaIsOnline()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取小程序是否上线
    ...mapActions(['getAuthMa']),
    getActiveMaIsOnline() {
      this.getAuthMa()
    },

    /**
       * 按钮组
       */
    // 选择门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.curSelectLabel = item.shopId !== -1 ? item.shopName : '全部员工'
    },

    // 切换表格显示
    changeShowType() {
      this.moduleType = this.moduleType === 'list' ? 'approve' : 'list'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 左侧组织 */
  .left {
    float: left;
    margin-right: 10px;
    padding: 24px 30px 24px 15px;
    border-radius: 5px;
    background-color: #fff;
    .title {
      margin-bottom: 24px;
      padding-left: 15px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  /* 右侧表格 */
  .right {
    overflow: hidden;

  }
</style>
